<template>
  <div class="recommend">
    <title-view :label="$t('home.recommend')"></title-view>
    <div class="recommend-list">
      <div class="recommend-item" v-for="(item, index) in data" :key="index" @click="showBookDetail(item)">
        <div class="img-wrapper">
          <img class="img" :src="item.cover">
        </div>
        <div class="content-wrapper">
          <div class="title title-medium" ref="title">{{item.title}}</div>
          <div class="num sub-title" ref="num">{{$t('home.readers').replace('$1', item.readers)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import TitleView from './Title'
  import { storeHomeMixin } from '../../utils/mixin'

  export default {
    mixins: [storeHomeMixin],
    components: {
      TitleView
    },
    props: {
      data: Array
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";

  .recommend {
    .recommend-list {
      width: 100%;
      @include top;
      margin-top: px2rem(20);
      padding: 0 px2rem(10);//5
      box-sizing: border-box;
      .recommend-item {
        flex: 0 0 33.33%;
        width: 33.33%;//33.33%
        padding: 0 px2rem(10);//5
        box-sizing: border-box;
        .img-wrapper {
          @include center;
          .img {
            width: 60%;
            height: 90%;
          }
        }
        .content-wrapper {
          width: 100%;
          margin-top: px2rem(20);//10
          @include columnCenter;
          .title {
            padding: px2rem(4) 0;
            text-align: center;
            @include ellipsis2(2);
            line-height: px2rem(35);
            font-size: px2rem(30);
            font-weight: bold;
          }
          .num {
            margin-top: px2rem(15);
            @include ellipsis2(1)
          }
        }
      }
    }
  }
</style>
